<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>DOM操作-练习</title>
		<style type="text/css">
			body {
				font-size: 13px;
				line-height: 25px;
			}
			
			table {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				width: 300px;
			}
			
			td {
				border-right: 1px solid #333;
				border-bottom: 1px solid #333;
			}
			
			.center {
				text-align: center;
			}
		</style>
		<script src="jquery.js"></script>
		<!-- <script>
			function addRow() {
				var fRow = document.getElementById("row3");
				var newRow = document.createElement("tr"); //创建行节点
				var col1 = document.createElement("td"); //创建单元格节点
				col1.innerHTML = "幸福从天而降"; //为单元格添加文本
				var col2 = document.createElement("td");
				col2.innerHTML = "&yen;18.50";
				col2.setAttribute("align", "center");
				newRow.appendChild(col1); //把单元格添加到行节点中
				newRow.appendChild(col2);
				document.getElementById("row1").parentNode.insertBefore(newRow, fRow); //把行节点添加到表格末尾
			}

			function updateRow() {
				var uRow = document.getElementById("row1");
				//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
				uRow.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
			}

			function delRow() {
				var dRow = document.getElementsByTagName("tr"); //访问被删除的行
				if(dRow[2]!=null){
					dRow[2].parentNode.removeChild(dRow[2]); //删除行
				}
			}

			function copyRow() {
				var oldRow = document.getElementById("row3"); //访问复制的行
				var newRow = oldRow.cloneNode(true); //复制指定的行及子节点
				document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
			}			
		</script> -->
	</head>

	<body>
		<table border="0" cellspacing="0" cellpadding="0" id="table">
			<tr id="row1">
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr id="row2">
				<td>看得见风景的房间</td>
				<td class="center">&yen;30.00</td>
			</tr>
			<tr id="row3">
				<td>60个瞬间</td>
				<td class="center">&yen;32.00</td>
			</tr>
		</table>
		<input name="b1" type="button" class="add" value="增加一行"  />
		<input name="b2" type="button"class="remove" value="删除第2行"  />
		<input name="b3" type="button" class="change" value="修改标题样式" />
		<input name="b4" type="button" class="cc"  value="复制最后一行"  />

	</body>
<script>
	$(function(){
	// 添加新的一行
	$(".add").click(function(e){
		// console.info(e);
		var tr = $("<tr class='a'></tr>");
		var book = "<td >幸福从天而降</td>";
		var num = "<td style='text-align: center;'>&yen;18.50</td>";
		tr.html(book+num);
		$("#table").append(tr);
		tr.slideDown();
		
		// 回车 键盘事件 保存输入在 input 框中的内容
		$(document).keydown(function(e){
			// console.info(e);
			if(e.key=="Enter"){
				// console.info($("#title").val()+$("#num").val());
				// 运用替换节点 将之前的input框 替换掉
				$(".a").replaceWith("<tr>"+"<td>"+$("#title").val()+"</td>"+"<td>"+"￥"+$("#num").val()+"</td>"+"</tr>");
			};
		});
	});
	
	// 删除第二行
	$(".remove").on("click",function(){
		// 索引号 2 remove 删除
		$("tr").eq(2).remove();
	});
	
	// 修改标题样式
	$(".change").click(function(){
		
		$("#row1").css({"font-weight":"bold","text-align":"center","background-color": "#cccccc"})
		// var uRow = document.getElementById("row1");
		// 		//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
		// 		uRow.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
	})
	

	// 复制最后一行 添加在最后一行
	$(".cc").click(function(){
		$("#table tr:last").clone(true).appendTo($("table tr:eq(0)").parent());
	});
	
	// 鼠标移动 高亮显示
	$("tr").mouseover(function(){
		$(this).css("background-color","#ffb3b3").siblings().css("background-color","");
	});
	// 鼠标离开后高亮显示取消
	$("tr").mouseout(function(){
		$(this).css("background-color","");
	});
})

</script>
</html>